<template>
	<div class="mylist-wrap">
		<ul class="tabNav" v-show="isTab">
			<li ca="pt_v170720_ptlist_tab1_click" ><a :href="tuanlistUrl">拼团商品</a></li>
			<li ca="pt_v170720_ptlist_tab2_click" class="cur"> 我的拼团</li>
		</ul>
		<div class="noMylist" v-show="nolist">
			<div class="content">
				<p class="noPic"><img src="../../../assets/image/tuan/noItem.png" height="159" width="129" alt=""></p>
				<p class="tips">竟然没有任何拼团记录</p>
				<a class="goTuanList" 
				   ca="pt_v170720_mygroup_checkmore_click"
				   :href="tuanlistUrl">去看看有什么拼团活动</a>
			</div>
		</div>
		<ul>
			<li v-for="item in myTuanList" class="itemBox">
				<a :href="detailIndexUrl + '&prizeCode=' + item.prizeCode +'&groupId=' + (item.groupId || '')"
				   ca="pt_v170720_mygroup_click" 
				   class="mylistTop">
					<div class="imgBox">
						<img :src="item.imgUrl" alt="">
					</div>
					<div class="detailBox">
						<p class="lable">
							<span :class="item.mdseType | markType"></span>
							<span class="s1">{{item.type | joinTuanType}}</span>
						</p>
						<h4 class="l_name" v-text="item.desc">商品名称</h4>
						<p class="l_info">
							<span class="s1"><em v-text="item.num || 0">0</em>人团</span>
						<span class="s2">￥<em v-text="item.groupPrice || 0">0</em></span>
							<span class="s3">单买价: <em>¥<span v-text="item.price || 0">0</span></em></span>
						</p>
					</div>
				</a>
				<div class="mylistInfo">
					<p class="tuan_status" 
						v-show="item.status === '1'">拼团中
						<span v-show="item.quantity > 0">还差<em v-text="item.quantity">0</em>人</span>
						<span v-show="item.quantity === 0">团员已满</span></p>
					<p class="tuan_status success" v-show="item.status === '2'">拼团成功</p>
					<p class="tuan_status fail" v-show="item.status === '3'">拼团失败</p>
					<a class="link_btn" 
					   ca="pt_v170720_mygroup_orderdetail_click"
					   :href="detailInfoUrl + item.orderId">订单详情</a>
					<a class="link_btn status1" 
					   ca="pt_v170720_mygroup_groupdetail_click"
					   v-if="item.status === '1' && item.quantity > 0"
					   :href="detailIndexUrl + '&prizeCode=' + item.prizeCode +'&groupId=' + (item.groupId || '')">邀请好友</a>
					<a class="link_btn" 
					   ca="pt_v170720_mygroup_groupdetail_click"
					   v-if="item.status === '1' && item.quantity === 0" 
					   :href="detailIndexUrl + '&prizeCode=' + item.prizeCode +'&groupId=' + (item.groupId || '')">拼团详情</a>
					<a class="link_btn" 
					   ca="pt_v170720_mygroup_groupdetail_click"
					   v-if="(item.status === '2' || item.status === '3') && item.quantity >= 0" 
					   :href="detailIndexUrl + '&prizeCode=' + item.prizeCode +'&groupId=' + (item.groupId || '')">拼团详情</a>
				</div>
			</li>
		</ul>
	</div>
</template>
<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	//import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
				nolist:false,
				myTuanList:'',
				detailInfoUrl:'',
				detailIndexUrl:'',
				tuanlistUrl:'',
				isTab:false,
			};
		},
		components: {	
		},
		created (){
			this.getMyTuanList();

		},
		mounted (){
			this.isAppGt36();
			this.toTuanList();
			this.isTabFn();
			var env = process.env.NODE_ENV;
			//订单详情
			var orderUrlMap = {
				'prod':'//sk.jia.chexiang.com/cx/cxj-spike/module/orderdetail.shtml?orderid=',
				'pre':'//sk.jia.chexiangpre.com/cx/cxj-spike/module/orderdetail.shtml?orderid=',
				'sit':'//sk.jia.chexiangsit.com/cx/cxj-spike/module/orderdetail.shtml?orderid='
			};
			this.detailInfoUrl = orderUrlMap[env]||orderUrlMap['sit'];
			this.detailIndexUrl = (common.isHtml() == "shtml" ? "/cx/cxj/cxjweb": "") + "/tuan/join/tuan-join." + common.isHtml() +"?userInfo=" + (common.getQueryString('userInfo') || "");
			//测试数据
			// var obj = {"result":1,"msg":null,"obj":[{"imgUrl":"https://i1.chexiangpre.com/images//6762dcd6765e7ee7a147b4402a3f3174/8bb728caf2a19b5f6263478d7eaaee24/71a4b8bcee884a7ab590210d66e0b952.png","num":2,"desc":"［新人团］1元洗车","type":1,"groupPrie":1.0,"prize":25.0,"skuCode":"1064351","groupBuySkuCode":"1064405","mallUrl":null,"spuCode":"1067230","groupBuySpuCode":"1067316","tradeUrl":"https://h.jia.chexiangpre.com/service/xc.htm","status":"1","groupStatus":"0","quantity":0,"prizeCode":"AGBUYPRIZE002","orderHeaderCode":"170714999999002934627","orderId":"170714101006002934628","groupId":124,"startTime":1500027713000},{"imgUrl":"https://i2.chexiangpre.com/images//6762dcd6765e7ee7a147b4402a3f3174/8bb728caf2a19b5f6263478d7eaaee24/71a4b8bcee884a7ab590210d66e0b952.png","num":2,"desc":"［新人团］1元洗车","type":1,"groupPrie":1.0,"prize":25.0,"skuCode":"1064351","groupBuySkuCode":"1064405","mallUrl":null,"spuCode":"1067230","groupBuySpuCode":"1067316","tradeUrl":"https://h.jia.chexiangpre.com/service/xc.htm","status":"2","groupStatus":"0","quantity":0,"prizeCode":"AGBUYPRIZE002","orderHeaderCode":"170714999999002934625","orderId":"170714101006002934626","groupId":123,"startTime":1500027664000}],"returnUrl":null,"errorCode":null,"skuCode":null}
			// this.$data.myTuanList = obj.obj

		},
		methods: {
			toTuanList:function(){

				this.$data.tuanlistUrl = (common.isHtml() == "shtml" ? "/cx/cxj/cxjweb": "") + "/tuan/list/tuan-list." + common.isHtml();
			},
			isTabFn:function(){
				let vm = this;
				if (common.getQueryString('fromTab')==='tab') vm.$data.isTab = true;
			},
			isAppGt36:function(){
				if (common.isApp() && common.checkAppversionIsGt35()) {
					lb.hideMenu();
				}
			},
			getMyTuanList:function(){
				const vm = this
				let myTuanUrl = common.isdev() + '/activity/groupbuy/myGroupActivityPage.htm';
				common.vueAjax('get',myTuanUrl).then(res => {
					if(res.data.result == -99){
						 common.goLogin()
						// let goLogin = common.getLocation()  + '/user/toLogin.htm?targetUrl=' + window.location.href 
					 //    window.location.href = goLogin

					}else if(res.data.result === 1){
						vm.$data.myTuanList = res.data.obj;
						res.data.obj.length === 0 ? vm.$data.nolist = true : vm.$data.nolist = false
						vm.$nextTick(function () {
							common.ANA_AnalyticsScan();
						});
					}
					
				}),err => console.log(err);
			},
		}
	}
</script>
<style lang="scss">
	@import "../../../assets/css/reset.scss";
	@import "../../../assets/css/common.scss";
	html, body {
		height: 100%;
		background-color: #F6F7F7;
	}
	.mylist-wrap {
		height: 100%;
		.tabNav{
			display: flex;
			display: -webkit-box;//低版本安卓
			display: -webkit-flex; 
			background-color: #fff;
			li{
				width: 50%;
				-webkit-box-flex: 1;
				-webkit-flex: 1; 
				flex:1;
				height: 4rem;
				line-height: 4rem;
				text-align: center;
				font-size: 1.5rem;
				a{
					color: #000;
				}
				&.cur{
					color:#ff6600;
					position: relative;
					&:after{
						content:'';
						position: absolute;
						bottom:0;
						width: 6rem;
						height: 2px;
						left: 50%;
						margin-left:-3rem; ;
						background-color: #ff6600;
					}
				}
			}
		}
		.noMylist{
			display: flex;
			display: -webkit-box;//低版本安卓
			display: -webkit-flex; 
			justify-content:center;
			align-items: center;
			-webkit-justify-content: center;
			-webkit-align-items: center;
			height: 100%;
			.noPic{
				text-align: center;
				margin-bottom: 1.5rem;
				img{
					width: 4.3rem;
					height: 5.3rem;
				}
			}
			.tips{
				font-size:1.5rem;
				color:#999;
				text-align: center;
				margin-bottom: 3.1rem;
			}
			.goTuanList{
				display: block;
				font-size:1.3rem;
				color:#243742;
				border:1px solid #8e969b;
				border-radius:1.9rem;
				width:17.9rem;
				height:3.5rem;
				line-height:3.5rem;
				text-align: center;
			}
		}
		.itemBox{
			border-bottom:.9rem solid #F6F7F7;
			background-color: #fff;
		}

		.mylistTop{
			display: flex;
			display: -webkit-box;//低版本安卓
			display: -webkit-flex; 
			margin: 0 1.5rem;
			padding:1.5rem 0 1rem 0;
			border-bottom: 1px solid #e7e7e7;
			color: #000;
			.imgBox{
				margin-right: 1rem;
				width: 13.5rem;
				height: 9rem;
				background-color: #ccc;
				overflow: hidden;
				img{
					width: 100%;
					height: auto;
				}

			}
			.detailBox{
				-webkit-box-flex: 1;
				-webkit-flex: 1; 
				flex:1;
				.lable {
					margin-bottom: 	1rem;
					font-size: 0;
					.mark-type-01 {
						display: inline-block;
    					vertical-align: top;
						width: 6rem;
						height:1.8rem;
						margin-right: 0.5rem;
						padding: 0;
						background:url(../../../assets/image/tuan/mark/mark-type-01.png) center center no-repeat;
			  			background-size: contain;
					}
					.mark-type-02 {
						display: inline-block;
    					vertical-align: top;
						width: 6rem;
						height:1.8rem;
						margin-right: 0.5rem;
						padding: 0;
						background:url(../../../assets/image/tuan/mark/mark-type-02.png) center center no-repeat;
			  			background-size: contain;
					}
					span{
						font-size:1.1rem;
						color:#ff6600;
						letter-spacing:0;
						text-align:justify;
						background:#ffefe5;
						border-radius:2px;
						height:1.8rem;
						line-height:1.8rem;
						padding:.2rem .4rem;
					}
					
				}
				.l_name{
					font-size: 1.5rem;
					height: 3.2rem;
					line-height: 1.6rem;
					margin-bottom: 1.3rem;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.l_info{
					.s1{
						font-size:1.3rem;
						color:#999;
					}
					.s2{
						font-size:1.3rem;
					}
					.s3{
						font-size:1.1rem;
						color:#999;
						em{
							text-decoration:line-through;
						}
					}
				}
			}
		}
		.mylistInfo{
			overflow: hidden;
			padding:1rem 1.5rem;
			.tuan_status{
				float: left;
				font-size: 1.5rem;
				height:2.7rem;
				line-height:2.7rem;
				width: 14rem;
				margin-right: 3.8rem;
				span em{
					color: #ff6600;
				}
				&.success{
					color: #ff6600;
				}
				&.fail{
					color: #999;
				}
			}
			.link_btn{
				float: left;
				font-size:1.3rem;
				color:#243742;
				border:1px solid #8e969b;
				border-radius:1.9rem;
				width:7.4rem;
				height:2.7rem;
				line-height:2.7rem;
				text-align: center;
				margin-right: 1rem;
				&:last-child{
					margin-right: 0;
				}
				&.status1{
					background-color: #ff6600;
					color: #fff;
					border:1px solid #ff6600;
				}
				-webkit-tap-highlight-color:rgba(255,239,229,.5);
			}
		}
	}
</style>
